<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="box" class="fontColor">
        <!-- <div>
            <ul>
                <li class="text">文字</li>
            </ul>
        </div> -->

    </div>
    <form action=" ">
        <label for="username ">姓名：</label>
        <input type="text " name="username " id="username " placeholder="请输入姓名 ">
        <br>
        <label for="age ">年龄：</label>
        <input type="number " name="userage " id="age " placeholder="请输入年龄 ">
        <br>
        <!-- 单选框：radio 必须给单选框添加相同的name属性值  -->
        <label for="gender ">性别：</label>
        <input type="radio " name="gender " id="male " value="male ">
        <label for="male ">男</label>
        <input type="radio " name="gender " id="female " value="female ">
        <label for="female ">女</label>
        <br>
        <!-- 复选框 checkbox  -->
        <label for="hobby ">爱好：</label>
        <input type="checkbox " name="hobby[] " id="hobby1 " value="reading ">
        <label for="hobby1 ">阅读</label>
        <input type="checkbox " name="hobby[] " id="hobby2 " value="swimming ">
        <label for="hobby2 ">游泳</label>
        <input type="checkbox " name="hobby[] " id="hobby3 " value="running ">
        <label for="hobby3 ">跑步</label>
        <br>
        <!-- 下拉列表  -->
        <label for="address ">地址：</label>
        <select name="address " id="address " multiple>
            <option value="beijing ">北京</option>
            <option value="shanghai ">上海</option>
            <option value="guangzhou ">广州</option>
            <option value="shenzhen ">深圳</option>
        </select>
        <br>
        <input type="submit " value="提交 ">
    </form>

</body>

</html>